<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- v-cloak 解决闪烁问题 -->
    <style>
        [v-cloak]{
            display: none; /* 简单理解：在未拿到数据前不显示（空白）至少比显示模板强 */
        }
    </style>
</head>
<body>

<div id="app" v-cloak>
    <div>{{info.name}}</div>
    <div>{{info.course.name}}</div>
    <a v-bind:href="info.url">学习视频</a>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data(){
            return{
                // 请求的返回参数格式，必须和 json 字符串一样（可以不写，写了的要一样）
                info: {
                    name: null,
                    age : null,
                    url : null,
                    course: {
                        name: null,
                        price: null
                    }
                }
            }
        },
        mounted(){ // 钩子函数，链式编程,,可以理解为这个是用来请求数据的
            axios.get('../data.json').then(response=>(this.info = response.data))
        }
    });
</script>

</body>
</html>